<template>
	<view class="container">
		<carHeader>
			<slot>
				<uni-nav-bar :border="false" background-color="rgba(255,255,255,0.0)"></uni-nav-bar>
			</slot>
		</carHeader>
		<view class="title">
			<view class="title1">
				你好，
			</view>
			<view class="title2">
				欢迎登录车联网服务
			</view>
		</view>
		<image class="car" src="../../static/车联网服务-00登录-01获取位置_slices/组 6.png" mode="widthFix"></image>
		<view class="main">
			<form>
				<view class="line">
					<input type="text" v-model="form.username" placeholder="用户名" />
				</view>
				<view class="line">
					<input type="text" v-model="form.phone" placeholder="手机号" />
				</view>
				<view class="line" id="last">
					<input type="text" v-model="form.code" placeholder="验证码" />
					<button class="yanzheng" :src="src" alt="" @click="huoqucCode">获取验证码</button>
				</view>
				<view class="button">
					<button type="primary" @click="toLogin">登录</button>
				</view>
			</form>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: "",
					phone: "",
					code: ""
				},
				uuid: "",
				src: "",
				msg: ""
			};
		},
		methods: {
			// 获取验证码
			huoqucCode() {
				uni.request({
					url: "http://localhost:8080/shop/sendcode",
					data: {
						username:this.form.username,
						phone: this.form.phone
					},
					method: "post",
					success: (res) => {
						console.log(res)
						console.log("获取到手机验证码");
					}
				});
			},
			// 登录
			toLogin() {
					uni.request({
						url: "http://localhost:8080/user/userlist",
						// url: "1",
						data: {
							username: this.form.username,
							phone: this.form.phone,
							code: this.form.code,
							// uuid: this.uuid
						},
						method: "post",
						success: (res) => {
							
							console.log(res);
							
							
							console.log("-----------------")
							console.log(res.data.data);
							
								
							//判断登录成功还是失败
							if (res.data.code === 200) { //成功
							var that = this;
							that.$userMsg.userId = res.data.data.id
							that.$userMsg.token = res.data.data.token
							that.$userMsg.userName = res.data.data.name
							console.log("----------------")
							console.log(this.$userMsg.userId)
							console.log(this.$userMsg.token)
							console.log(this.$userMsg.userName)
								//token存储到缓存区
								uni.setStorage({
									key: 'token',
									data: res.data.token,
									success: function() {
										console.log('存储token success');
										//跳转到首页
										// uni.redirectTo({
										// 	url:"/pages/index/index"
										// })
										uni.navigateTo({
											url: "/pages/index/index"
										})
									}
								});
					
							} else {
								console.log(res.data.msg);
								// this.msg = res.data.msg;
					
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							}
						}
					});
				
			}
		},
		onShow() {
			// console(this.$userMsg);
		}

	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
	}

	.car {
		width: 280rpx;
		position: relative;
		top: -200rpx;
		left: 450rpx;
		z-index: 2;
	}

	.main {
		background-color: white;
		height: 1000rpx;
		position: relative;
		top: -300rpx;
		border-radius: 50rpx;
		z-index: 1;
	}

	.title {
		height: 100rpx;
		// background-color: aqua;
		position: absolute;
		top: 100rpx;
		left: 100rpx;
		color: white;
		font-weight: 700;

		.title1 {
			font-size: 50rpx;
			height: 80rpx;
		}

		.title2 {
			font-size: 40rpx;
		}
	}

	.main {
		padding-top: 100rpx;
	}

	.line {
		border-bottom: 1px solid gray;
		width: 70%;
		height: 80rpx;
		margin: 10rpx auto;

		input {
			height: 80rpx;
			line-height: 80rpx;
		}

		image {
			width: 220rpx;
			height: 80rpx;
			position: relative;
			top: -80rpx;
			left: 500rpx;
		}
	}

	#last {
		width: 40%;
		margin: 10rpx 15%;

		image {
			width: 130rpx;
			height: 80rpx;
			position: relative;
			top: -80rpx;
			left: 380rpx;
		}
	}

	.button {
		width: 75%;
		margin: 40rpx auto;
	}
	.yanzheng{
		width: 240rpx;
		height: 80rpx;
		position: relative;
		top: -80rpx;
		left: 280rpx;
	}
</style>